<script setup>
import { ref } from 'vue'
import general from './customerTab/general.vue'
import dynamic from './customerTab/dynamic.vue'
import chattingRecords from './customerTab/chattingRecords.vue'
import inGroup from './customerTab/inGroup.vue'
import etongVue from './customerTab/etong.vue'
import business from './customerTab/business.vue'
import order from './customerTab/order.vue'
import { number } from 'echarts'
const custormerDrawerRef = ref(null)
const props = defineProps({
	// tabActiveKey: Number,
	// id:number
})
console.log('1111')
const activeIndex = ref(1)
const tab1 = ref(null)
const tab2 = ref(null)
const tab3 = ref(null)
const tab4 = ref(null)
const tab5 = ref(null)
const tab6 = ref(null)
const tab7 = ref(null)
const show = (type,val)=>{
	
	activeIndex.value = type
	switch (type) {
		case 1:
		setTimeout(()=>{
			tab1.value.show(val.external_userid,val)
		},5)
			break;
		case 2:
			setTimeout(()=>{
				tab2.value.show(val)
			},5)
			
			break;
		case 3:
			tab3.value.show(val)
			break;
		case 4:
			setTimeout(()=>{
				tab4.value.show(val)
				},5)
			break;
	}
}
defineExpose({
	show
})
</script>
<template>
	<div class="customer-detail-tab" style="background: #fff;">
		<general ref="tab1" v-if="activeIndex==1" />
		<dynamic ref="tab2" v-if="activeIndex==2" />
		<chattingRecords ref="tab3" v-if="activeIndex==3" />
		<inGroup ref="tab4" v-if="activeIndex==4" />
		<etongVue ref="tab5" v-if="activeIndex==5" />
		<business ref="tab6" v-if="activeIndex==6" />
		<order ref="tab7" v-if="activeIndex==7" />
	</div>
</template>
<style lang="scss">
.customer-detail-tab {
	width: 100%;
}
</style>
